import { Component } from 'react';
import { List, Avatar } from 'antd';

class PostsItem extends Component {
    constructor(props){
        super(props);
        this.state = {
            postsId: props.info.id,
            userName: props.info.userName,
            title: props.info.title,
            body: props.info.body,
        }
    }

    showCommnet = ( e ) => {
        e.stopPropagation();
        const id = this.state.postsId;
        this.props.showComment( id );
    }

    render() {
        const { userName, title, body } = this.props.info;
        const re = new RegExp(/^\S+/g);
        return (
            <div>
                <List.Item>
                    <List.Item.Meta
                        avatar={
                            <Avatar
                                size="large"
                                title={ userName }
                                >
                                { re.exec(userName)[0] }
                            </Avatar>
                        }
                        title={
                            <a title="查看评论"
                                onClick={ this.showCommnet }
                                >
                                {title}
                            </a>
                        }
                        description={ body }
                    />
                </List.Item>
            </div>
        );
    }
}

export default PostsItem;